import React from "react";
import ReactDOM from "react-dom/client";

// 引入 classnames 模块，做动态 className 用
import classNames from "classnames";

// 引入 index.css
import "./index.css";
/**
 * React 没有指令系统，指令系统只存在与 Angular（鼻祖）、vue、小程序
 * 1. && 并操作符
 * 2. 三元运算
 */

class App extends React.Component {
  state = {
    isShow: false,
    isLogin: false,
  };

  render() {
    const { isShow, isLogin } = this.state;

    return (
      <div>
        <h1>App</h1>
        {/* 
          isShow 为 true { <div>我是一个屁</div> }
          isShow 为 false { false }
        */}
        {isShow && <div>我是一个屁</div>}

        <button
          onClick={() => {
            this.setState({
              isShow: !this.state.isShow,
            });
          }}
        >
          切换 屁的条件渲染
        </button>

        {isLogin ? <div>欢迎你，张三</div> : <div>请登录</div>}

        <button
          onClick={() => {
            this.setState({
              isLogin: !this.state.isLogin,
            });
          }}
        >
          切换登录状态
        </button>
      </div>
    );
  }
}

/**
 * 动态 className
 *    1. 字符串拼接
 *        className={`tab ${curTab === "Tab 1" ? "active" : ""}`}
 *    2. 安装一个 classnames 模块，可以实现如下。
 *      className={ { 'active'': curTab === 'Tab 1' } }
 *      className={['tab', {'active': curTab === 'Tab 1'}]}
 *
 *       先安装 classnames 模块   npm install classnames
 *
 *        classNames({ 'active'': curTab === 'Tab 1' })        => ''
 *        classNames(['tab', {'active': curTab === 'Tab 1'}])  => ''
 *
 * 动态 style
 *    1. 一般不推荐使用 style
 *    2. style={{}}
 */

// console.log("===", classNames({ active: false, box: true })); // => 'box'
// console.log("===", classNames(["a", "b", "c", { active: true }])); // => 'a b c active'

class Hello extends React.Component {
  state = {
    curTab: "Tab 1",
  };

  render() {
    const { curTab } = this.state;

    return (
      <div>
        <h1>Hello</h1>

        <div>
          <button
            className={classNames([
              "tab",
              { active: curTab === "Tab 1", key2: value2 },
            ])}
            onClick={() => {
              this.setState({
                curTab: "Tab 1",
              });
            }}
          >
            Tab 1
          </button>
          <button
            className={classNames(["tab", { active: curTab === "Tab 2" }])}
            onClick={() => {
              this.setState({
                curTab: "Tab 2",
              });
            }}
          >
            Tab 2
          </button>
          <button
            className={`tab ${curTab === "Tab 3" ? "active" : ""}`}
            onClick={() => {
              this.setState({
                curTab: "Tab 3",
              });
            }}
          >
            Tab 3
          </button>
        </div>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<Hello />);
